<template>
  <div>
    <template>
      <div class="app-container">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="searchObj.hosname" placeholder="医院名称" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchObj.hoscode" placeholder="医院编号" />
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()"
            >查询</el-button
          >
        </el-form>
        <!-- 工具条 -->
        <div>
          <el-button type="danger" size="mini" @click="removeRows()"
            >批量删除</el-button
          >
        </div>

        <!-- banner列表 -->
        <el-table
          :data="list"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="hosname" label="医院名称" />
          <el-table-column prop="hoscode" label="医院编号" />
          <el-table-column prop="apiUrl" label="api基础路径" width="200" />
          <el-table-column prop="contactsName" label="联系人姓名" />
          <el-table-column prop="contactsPhone" label="联系人手机" />
          <el-table-column label="状态" width="80">
            <!-- 根据每一行的status判断 是否可用 -->
            <template slot-scope="scope">
              {{ scope.row.status === 1 ? "可用" : "不可用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="removeDataById(scope.row.id)"
                >删除
              </el-button>
              <el-button
                v-if="scope.row.status === 1"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="lockHospitalSet(scope.row.id, 0)"
                >锁定
              </el-button>
              <el-button
                v-if="scope.row.status === 0"
                type="primary"
                size="mini"
                icon="el-icon-delete"
                @click="lockHospitalSet(scope.row.id, 1)"
                >解锁
              </el-button>
              <router-link :to="'/hospitalSet/edit/' + scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit"
                  >编辑
                </el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          style="padding: 30px 0; text-align: center;"
          layout="total, prev, pager, next, jumper"
          @current-change="getList"
        />
      </div>
    </template>
  </div>
</template>

<script>
import hospset from "@/api/hospitalSet";
export default {
  data() {
    return {
      pageNum: 1, //当前页
      pageSize: 3, //每页数据量
      searchObj: {}, //查询对象
      list: [], //返回结果存放的数组
      total: 0, //数据的总条数
      multipleSelection: [] //批量删除选择时的对象列表
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //分页列表
    getList(page = 1) {
      this.pageNum = page;
      hospset
        .getList(this.pageNum, this.pageSize, this.searchObj)
        .then(res => {
          // console.log(res);
          this.list = res.data.records;
          this.total = res.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //根据id删除医院设置
    removeDataById(id) {
      this.$confirm("此操作将永久删除医院设置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        hospset.deleteHospSetById(id).then(res => {});
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.getList();
      });
    },
    handleSelectionChange(selections) {
      this.multipleSelection = selections;
    },
    //批量删除医院设置
    removeRows() {
      this.$confirm("此操作将永久删除医院设置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var idList = [];
        this.multipleSelection.forEach(obj => {
          idList.push(obj.id);
        });
        hospset.removeRows(idList).then(res => {});
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.getList();
      });
    },
    //解锁/锁定 医院设置
    lockHospitalSet(id, status) {
      hospset.lockHospitalSet(id, status).then(res => {
        this.getList();
      });
    }
  }
};
</script>

<style></style>
